<template>
  <!-- 路由渲染视图 容器 -->
  <div style="margin-bottom: 40px">
    <router-view></router-view>
  </div>
  <van-tabbar v-model="active" active-color="rgb(253,95,5)" route v-show="store.showBottom">
    <!-- 一个item代表一个底部菜单 -->

    <van-tabbar-item  to="/">
      <span>首页</span>
      <template #icon="props">
        <span class="iconfont icon-shouye"></span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item  to="/kuai">
      <span>快省</span>
      <template #icon="props">
        <span class="iconfont icon-taobao"></span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item :badge="storeCart.cartList.length" to="/cart">
      <span>购物车</span>
      <template #icon="props">
        <span class="iconfont icon-gouwuche"></span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/my">
      <span>我的</span>
      <template #icon="props">
        <span class="iconfont icon-wode"></span>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script  setup lang="ts">
// 引入图标css
import './assets/font/iconfont.css'
import { ref,watch } from "vue";
import { useBottomStore } from '@/stores/buttom'
import { useCartStore } from '@/stores/cart'

const store = useBottomStore()
const storeCart = useCartStore()


    //底部导航
    const active = ref(0);
    //监听底部变化
    watch(active, (newVal, oldVal) => {
      console.log(oldVal);
      console.log(newVal);
    });

</script>

<style lang="scss">
.iconfont {
  font-size: 22px;
}
::-webkit-scrollbar {
  display: none;
  /* width: 0; */
  /* height: 0; */
}
</style>
